/**
 * [工作台][JS]
 * @param $isCreate 是否新建
 */
var app = function ($isCreate) {

    return new Vue({
        el: '#vueContainer',
        data: function () {
            return {
                loadOver: false,
                detailOver: false,
                settingOver: false,
                showTopScroll: false, // 是否已滚动，默认否
                setting: {
                    pageType: 'form',    // 页面类型
                    isCreate: $isCreate, // 添加状态
                },
                searchForm: {
                    time_type: 'day',       // 最终提交表单 时间类型
                    time_range: [],         // 最终提交表单 时间区间，time_type=custom才有此字段
                },
                pageDialog: {
                    show: false,    // 页面 - 是否展示弹出层
                    url: '',        // 页面 - 弹出层连接
                    loading: false, // 页面 - 弹出层加载中
                    isIframe: false // 页面 - 是否[iframe]嵌入
                },
                searchTime: {
                    time_type: 'day',       // 最终提交表单 时间类型
                    time_range: [],         // 最终提交表单 时间区间，time_type=custom才有此字段
                    oldType: null,          // 做暂存时间类型，用于自定义事件取消后恢复
                    selectTxt: '今日',       // 选择文本(选择以后展示用)
                    selectTextStage: '',    // 当前选中时间暂存文本，确定之后赋值[selectTxt]展示
                    lastSelectTxt: '昨日',   // 选择文本(选择以后展示用)
                    showPop: false,         // 是否展示查询时间弹出层
                    option: [
                        {
                            text: '天',
                            last: '昨日',
                            data: [
                                {text: '今日', value: 'day'},
                                {text: '昨日', value: 'yesterday'},
                                {text: '前日', value: 'before_yesterday'},
                            ]
                        },
                        {
                            text: '周',
                            last: '上周',
                            data: [
                                {text: '本周', value: 'week'},
                                {text: '上周', value: 'last_week'},
                                {text: '上上周', value: 'before_last_week'},
                            ]
                        },
                        {
                            text: '月',
                            last: '上月',
                            data: [
                                {text: '本月', value: 'month'},
                                {text: '上月', value: 'last_month'},
                                {text: '上上月', value: 'before_last_month'},
                            ]
                        },
                        {
                            text: '季度',
                            last: '上季度',
                            data: [
                                {text: '本季度', value: 'quarter'},
                                {text: '上季度', value: 'last_quarter'},
                                {text: '上上季度', value: 'before_last_quarter'},
                            ]
                        },
                        {
                            text: '年度',
                            last: '上年度',
                            data: [
                                {text: '本年度', value: 'year'},
                                {text: '上年度', value: 'last_year'},
                                {text: '上上年度', value: 'before_last_year'},
                            ]
                        }
                    ],          // 选项
                    elementOpt: {
                        onPick: this.searchTimeOnPick,
                        disabledDate: this.searchTimeDisabled
                    }   // 文档选项
                },
                simpleStats: {
                    user: {
                        status: true,
                        loading: true,
                        idName: 'simpleUser',
                        text: '新增用户',
                        unit: '人',
                        url: $w.getApiUrl('statistics.simpleUser'),
                        sum: 0, // 本次时间查询总数
                        lastSum: 0, // 上个单位时间查询总数
                        percent: 0, // 增长百分比
                        menuId: '61e921899308ca01e932ff71', // 菜单编号
                        menuParams: {}, // 菜单附带参数列表
                        menuInfo: [], // 菜单信息
                        data: []
                    },
                    news: {
                        status: true,
                        loading: true,
                        idName: 'simpleNews',
                        text: '新增文章',
                        unit: '篇',
                        url: $w.getApiUrl('statistics.simpleNews'),
                        sum: 0, // 本次时间查询总数
                        lastSum: 0, // 上个单位时间查询总数
                        percent: 0, // 增长百分比
                        menuId: '61ed28019308ca0086787471', // 菜单编号
                        menuInfo: [], // 菜单信息
                        data: []
                    },
                },        // [简单]统计数据
                sumStats: {
                    news: {
                        status: true,
                        loading: false,
                        idName: 'sumNews',
                        text: '文章',
                        unit: '篇',
                        url: $w.getApiUrl('statistics.sumNews'),
                        menuId: '61e921899308ca01e932ff71', // 菜单编号
                        menuParams: {}, // 菜单附带参数列表
                        menuInfo: [], // 菜单信息
                        data: []
                    },
                },        // [汇总]统计数据
                chartStats: {
                    news: {
                        status: true,
                        loading: false,
                        idName: 'chartNews',
                        text: '文章新增详细图表',
                        tooltip_text: '文章新增数',  // 统计图鼠标放入展示标题
                        unit: '篇',
                        url: $w.getApiUrl('statistics.simpleNews'),
                        data: []
                    },
                },        // [统计图]统计数据
            }
        },
        created: function () {

            // 获取设置
            this.getSetting();
            // 初始化
            this.init();
            var that = this;
            this.$nextTick(function () {
                that.initAllStat();
                that.loadOver = true;
                that.initMainScroll();
            });
        },
        methods: {
            /**
             * 初始化的逻辑
             */
            init: function () {

                var that = this;
                this.$nextTick(function () {
                    // 监听主滚动条
                    that.$refs['mainScroller'].wrap.addEventListener('scroll', function ($event) {
                        that.showTopScroll = $event.srcElement.scrollTop > 10; // 顶部以滚动
                    })
                });
            },
            /**
             * 初始化滚动条
             */
            initMainScroll: function () {
                var shadowDom = this.$refs['mainScrollShadow'];
                if (!shadowDom) return false;
                this.$refs.mainScroller.wrap.onscroll = function ($event) {
                    var opacity = 0;
                    opacity = $event['srcElement']['scrollTop'] / 100;
                    opacity = opacity > 0.6 ? 0.6 : opacity
                    shadowDom['$el']['style']['box-shadow'] = '0 5px 15px 0 rgb(204, 204, 204, ' + opacity + ')';
                };
            },
            /**
             * 获取设置
             * @returns {boolean}
             */
            getSetting: function () {
                // 正在加载...
                var loadingInstance = ELEMENT.Loading.service({
                    fullscreen: false,
                    text: '加载中...',
                    customClass: 'z-index-top'
                });
                var that = this;

                // 获取各模块的值
                $w.request({
                    url: $w.getApiUrl('statistics.setting'),
                    type: 'get',
                    data: {},
                    dataType: 'json',
                    afterCallback: function () {
                        that.$nextTick(function () {
                            // 隐藏正在加载
                            loadingInstance.close();
                        });
                    },
                    callback: function (event) {

                        // 失败的返回|提示
                        if (parseInt(event.no) !== 200) {

                            return that.$message({
                                showClose: true,
                                type: 'error',
                                message: event.msg ? event.msg : '操作失败，请稍后尝试'
                            });
                        }

                        // 挨个赋值[setting]中
                        for (var i in event.data) {
                            if (!event.data.hasOwnProperty(i)) continue;
                            that.$set(that.setting, i, event.data[i]);
                        }
                    }
                });
            },
            /**
             * 初始化全部统计
             */
            initAllStat: function () {

                var item = [], that = this;

                // 初始化简报
                for (var i in this.simpleStats) {
                    if (!this.simpleStats.hasOwnProperty(i)) continue;
                    item = this.simpleStats[i];
                    // 执行
                    this.initSimpleItem(i, item);
                }

                // 初始化汇总
                for (i in this.sumStats) {
                    if (!this.sumStats.hasOwnProperty(i)) continue;
                    item = this.sumStats[i];
                    // 执行
                    this.initSumItem(item);
                }

                // 初始化汇总
                for (i in this.chartStats) {
                    if (!this.chartStats.hasOwnProperty(i)) continue;
                    item = this.chartStats[i];
                    // 执行
                    this.initChartItem(item);
                }
            },
            /**
             * 初始化简报统计条目
             * @param $key
             * @param $item
             * @returns {boolean}
             */
            initSimpleItem: function ($key, $item) {

                // 查询dom是否存在
                var chartDom = document.getElementById($item.idName);
                if (!chartDom) {
                    console.error('dom未找到：' + $item.idName);
                    return false;
                }

                // 正在加载...
                this.$set($item, 'loading', true);
                var that = this;

                // 获取各模块的值
                $w.request({
                    url: $item.url,
                    type: 'get',
                    data: this.searchForm,
                    dataType: "json",
                    afterCallback: function () {
                        that.$nextTick(function () {
                            // 加载中否
                            that.$set($item, 'loading', false);
                        });
                    },
                    callback: function (event) {

                        // 失败的返回|提示
                        if (parseInt(event.no) !== 200) {

                            $item.status = false; // 加载失败
                            return $item.error = event.msg ? event.msg : '请求频繁，请稍后尝试';
                        }

                        $item.status = true; // 加载成功

                        var myChart = echarts.init(chartDom, {
                            height: $(chartDom).height(),
                            width: $(chartDom).width(),
                        });

                        // 当前时间查询数量
                        that.$set($item, 'sum', event.data.sum);
                        // 上个时间查询数量
                        that.$set($item, 'lastSum', event.data.last_sum);

                        // 增长百分比
                        var percent = 0;
                        // 百分比都是0
                        if (event.data.last_sum === 0 && event.data.sum === 0) {
                            percent = 0;
                        }
                        // 当前时间是0
                        else if (event.data.sum === 0) {
                            percent = 100;
                        }
                        // 上个时间是0
                        else if (event.data.last_sum === 0) {
                            percent = 100;
                        }
                        // 否则计算
                        else {
                            percent = $w.format_number((
                                (
                                    event.data.last_sum - event.data.sum
                                ) / event.data.last_sum), 0, 1
                            ) * 100;
                        }

                        that.$set($item, 'percent', percent);

                        var dataList = [];
                        for (var i in event.data.list) {
                            if (!event.data.list.hasOwnProperty(i)) continue;
                            dataList.push([
                                event.data.list[i]['text'],
                                event.data.list[i]['data'],
                            ]);
                        }

                        var option = {
                            xAxis: {
                                type: 'category',
                                show: false,
                                axisPointer: {
                                    value: '',
                                    snap: true,
                                    lineStyle: {
                                        width: 0
                                    },
                                    label: {
                                        show: false
                                    },
                                    handle: {
                                        show: false,
                                        color: '#409EFF'
                                    }
                                },
                                splitLine: {
                                    show: false
                                }
                            },
                            yAxis: {
                                type: 'value',
                                show: false,
                                axisTick: {
                                    inside: true
                                },
                                splitLine: {
                                    show: false
                                },
                                axisLabel: {
                                    inside: true,
                                    formatter: '{value}\n'
                                },
                                z: 10
                            },
                            grid: {
                                top: 1,
                                bottom: 1,
                                left: 1,
                                right: 1,
                                width: '98%',
                                height: '98%'
                            },
                            dataZoom: [
                                {
                                    type: 'inside',
                                    throttle: 50
                                }
                            ],
                            series: [
                                {
                                    name: 'Fake Data',
                                    type: 'line',
                                    smooth: true,
                                    symbol: 'circle',
                                    symbolSize: 0,
                                    sampling: 'average',
                                    itemStyle: {
                                        color: '#409EFF'
                                    },
                                    stack: 'a',
                                    areaStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: 'rgba(63, 158, 255, 0.3)'
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(63, 158, 255, 0)'
                                            }
                                        ])
                                    },
                                    data: dataList
                                }
                            ]
                        };
                        // 初始化
                        myChart.setOption(option);
                    }
                });
            },
            /**
             * 初始化统计统计条目
             * @param $item
             * @returns {boolean}
             */
            initSumItem: function ($item) {

                // 正在加载...
                this.$set($item, 'loading', true);
                var that = this;

                // 获取各模块的值
                $w.request({
                    url: $item.url,
                    type: 'get',
                    data: this.searchForm,
                    dataType: "json",
                    afterCallback: function () {
                        that.$nextTick(function () {
                            // 加载中否
                            that.$set($item, 'loading', false);
                        });
                    },
                    callback: function (event) {

                        // 失败的返回|提示
                        if (parseInt(event.no) !== 200) {

                            $item.status = false; // 加载失败
                            return $item.error = event.msg ? event.msg : '请求频繁，请稍后尝试';
                        }

                        // 加载成功
                        $item.status = true;
                        // 赋值数据
                        that.$set($item, 'data', event.data.list);
                    }
                });
            },
            /**
             * 初始化统计图统计条目
             * @param $item
             * @returns {boolean}
             */
            initChartItem: function ($item) {

                // 查询dom是否存在
                var chartDom = document.getElementById($item.idName);
                if (!chartDom) {
                    console.error('dom未找到：' + $item.idName);
                    return false;
                }

                // 正在加载...
                this.$set($item, 'loading', true);
                var that = this;

                // 获取各模块的值
                $w.request({
                    url: $item.url,
                    type: 'get',
                    data: this.searchForm,
                    dataType: "json",
                    afterCallback: function () {
                        that.$nextTick(function () {
                            // 加载中否
                            that.$set($item, 'loading', false);
                        });
                    },
                    callback: function (event) {

                        // 失败的返回|提示
                        if (parseInt(event.no) !== 200) {

                            $item.status = false; // 加载失败
                            return $item.error = event.msg ? event.msg : '请求频繁，请稍后尝试';
                        }

                        $item.status = true; // 加载成功

                        var dataList = [];
                        for (var i in event.data.list) {
                            if (!event.data.list.hasOwnProperty(i)) continue;
                            dataList.push([
                                event.data.list[i]['text'],
                                event.data.list[i]['data'],
                            ]);
                        }
                        that.$set($item, 'data', dataList);

                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                formatter: function ($params) {

                                    return [
                                        $params[0].axisValueLabel,
                                        '<span class="point"></span>' +
                                        $item['tooltip_text'] +
                                        '<span class="ml-20"></span>' +
                                        $params[0].data[1] +
                                        $item['unit']
                                    ].join('<br>');
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                            },
                            yAxis: {
                                type: 'value',
                                show: true,
                                splitLine: {
                                    show: true
                                },
                            },
                            grid: {
                                left: '5%',
                                right: '5%',
                                bottom: '3%',
                                height: '95%',
                                containLabel: true,
                            },
                            series: [
                                {
                                    name: $item.tooltip_text,
                                    type: 'line',
                                    smooth: true,
                                    symbol: 'circle',
                                    symbolSize: 7,
                                    sampling: 'average',
                                    itemStyle: {
                                        color: '#409EFF'
                                    },
                                    stack: 'Total',
                                    areaStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: 'rgba(63, 158, 255, 0.3)'
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(63, 158, 255, 0)'
                                            }
                                        ])
                                    },
                                    data: dataList
                                }
                            ]
                        };

                        that.$nextTick(function () {

                            // 防止二次更新大小问题
                            $(chartDom).removeAttr('_echarts_instance_');
                            // 初始化
                            var myChart = echarts.init(chartDom, null, {
                                width: $(chartDom).width()
                            }, true);
                            myChart.setOption(option);
                        });
                    }
                });
            },
            /**
             * 提交查询搜索时间
             */
            submitSearchTime: function () {
                // 先将查询的时间数据赋值到表单
                this.searchForm.time_type = this.searchTime.time_type;
                this.searchForm.time_range = this.searchTime.time_range;

                // [上个]时间类型文本 改变 - 只有提交才改变
                this.$set(this.searchTime, 'selectTxt', this.searchTime.selectTextStage);

                this.initAllStat();
                this.searchTime.show = false;
            },
            /**
             * 查询时间类型改变
             */
            searchTimeTypeVis: function ($status) {
                this.showSearchTime = $status;
            },
            /**
             * 查询时间条目点击
             * @param $item
             * @param $lastText
             */
            searchTimeClick: function ($item, $lastText) {
                // 赋值类型
                this.$set(this.searchTime, 'time_type', $item.value);
                // 清空时间
                this.$set(this.searchTime, 'time_range', '');
                // 时间类型文本暂存赋值
                this.$set(this.searchTime, 'selectTextStage', $item.text);
                // [上个]时间类型文本
                this.$set(this.searchTime, 'lastSelectTxt', $lastText);
            },
            /**
             * 获取时间查询样式
             * @param $item
             */
            getSearchTimeClass: function ($item) {
                return $item.value === this.searchTime.time_type ? 'active' : '';
            },
            /**
             * 自定义选择时间改变
             * @param $value
             * @returns {boolean}
             */
            searchTimeChange: function ($value) {
                // 清空自定义
                if (!$value) {
                    this.$set(this.searchForm, 'time_type', this.searchTime.oldType);
                    return false;
                }

                // 时间类型备份 + 判断
                var type = 'custom';
                if (this.searchTime.time_type !== type) {
                    this.searchTime.oldType = this.searchTime.time_type;
                }
                this.searchTime.time_type = type;

                // 手动赋值
                this.$set(this.searchTime, 'time_range', [
                    $w.formatDate($value[0], 'Y-m-d'),
                    $w.formatDate($value[1], 'Y-m-d')
                ]);

                // 时间类型文本暂存赋值
                var text = this.searchTime.time_range[0] + '~' +
                    this.searchTime.time_range[1];
                this.$set(this.searchTime, 'selectTextStage', text);
            },
            /**
             * 查询时间自定义点选
             * @param $time
             */
            searchTimeOnPick: function ($time) {

                this.searchTime.time_range = [];
                // 范围最小时间
                if ($time.minDate) {
                    this.searchTime.time_range[0] = $w.formatDate($time.minDate, 'Y-m-d');
                }
                // 范围最大时间
                if ($time.maxDate) {
                    this.searchTime.time_range[1] = $w.formatDate($time.maxDate, 'Y-m-d');
                }
            },
            /**
             * 查询时间自定义时间点是否禁用
             * @param $time
             */
            searchTimeDisabled: function ($time) {
                if ($w.isEmpty(this.searchTime.time_range)) return false;
                if (!this.searchTime.time_range[0]) return false;

                var startTimestamp = $w.strtotime(this.searchTime.time_range[0], 1),
                    itemTimestamp = $w.strtotime($w.formatDate($time, 'Y-m-d'), 1),
                    maxDay = 60 * 60 * 24 * this.setting.maxInterval; // 暂时最大不超过15天

                return (startTimestamp + maxDay) <= itemTimestamp;
            },
            /**
             * 触发点击到具体页面
             * @param $item
             * @param $addParams 添加的参数
             * @returns {void|*}
             */
            goToPage: function ($item, $addParams) {

                // 已经有数据直接打开
                if (!$w.isEmpty($item.menuInfo)) return this.openMenu($item, $addParams);

                // 判断id是否为空
                if (!$item.menuId || $item.menuId.length <= 0) return this.$message({
                    showClose: true,
                    type: 'error',
                    message: '请完善菜单编号'
                });

                var that = this;
                // 加载中
                $item.loading = true;

                // 获取各模块的值
                $w.request({
                    url: $w.getApiUrl('adminMenu.detail'),
                    type: 'GET',
                    data: {id: $item.menuId},
                    dataType: "json",
                    afterCallback: function () {
                        that.$nextTick(function () {
                            // 详情加载完毕
                            $item.loading = false;
                        });
                    },
                    callback: function (event) {

                        // 失败的返回|提示
                        if (parseInt(event.no) !== 200) {

                            return that.$message({
                                showClose: true,
                                type: 'error',
                                message: event.msg ? event.msg : '操作失败，请稍后尝试'
                            });
                        }

                        // 放空列表
                        $item.menuInfo = event.data;
                        return that.openMenu($item, $addParams);
                    }
                });
            },
            /**
             * 触发最上级右侧菜单点击
             * @param $item
             * @param $addParams 添加的参数
             */
            openMenu: function ($item, $addParams) {
                if (!$item.menuInfo) return false;

                // 如果有参数加上参数
                $item.menuInfo.url = $w.urlAddParams($item.menuInfo.url, $item.menuParams);
                // 如果有参数加上参数
                $item.menuInfo.url = $w.urlAddParams($item.menuInfo.url, $addParams);
                window.top.instance.leftMenuLink($item.menuInfo);
            }
        },
        watch: {
            'searchTime.show': function ($val) {
                if (!$val) return false;
                this.searchTime.time_type = this.searchForm.time_type;
                this.searchTime.time_range = this.searchForm.time_range;
            }
        },
        computed: {
            /**
             * 获得顶部样式
             */
            getTopClass: function () {
                var className = [];
                // 如果已经滚动
                if (this.showTopScroll) className.push('is-scroll');

                return className.join(' ');
            }
        }
    });
};
